<template>
  <div class="landing-container">
    <!-- 测试Element Plus集成 -->
    <div class="test-section">
      <h1 class="gradient-text">Cyan-Note 管理系统</h1>
      <p class="subtitle">Electron + Vue.js + Element Plus 集成测试</p>
      
      <!-- Element Plus 组件测试 -->
      <div class="component-test">
        <el-card class="test-card" shadow="hover">
          <template #header>
            <div class="card-header">
              <span>UI组件测试</span>
              <el-button type="primary" size="small">
                <el-icon><Setting /></el-icon>
                设置
              </el-button>
            </div>
          </template>
          
          <div class="test-content">
            <el-row :gutter="20">
              <el-col :span="8">
                <el-button type="primary" size="large">
                  <el-icon><User /></el-icon>
                  主要按钮
                </el-button>
              </el-col>
              <el-col :span="8">
                <el-button type="success" size="large">
                  <el-icon><Check /></el-icon>
                  成功状态
                </el-button>
              </el-col>
              <el-col :span="8">
                <el-button type="warning" size="large">
                  <el-icon><Warning /></el-icon>
                  警告状态
                </el-button>
              </el-col>
            </el-row>
            
            <div class="status-tags">
              <el-tag class="status-tag status-progress" size="large">进行中</el-tag>
              <el-tag class="status-tag status-warning" size="large">即将超时</el-tag>
              <el-tag class="status-tag status-success" size="large">已完成</el-tag>
              <el-tag class="status-tag status-danger" size="large">异常</el-tag>
              <el-tag class="status-tag status-offline" size="large">离线</el-tag>
            </div>
            
            <el-input 
              v-model="testInput" 
              placeholder="测试毛玻璃效果输入框"
              size="large"
              style="margin-top: 20px;"
            >
              <template #prefix>
                <el-icon><Search /></el-icon>
              </template>
            </el-input>
          </div>
        </el-card>
      </div>
      
      <!-- 系统信息 -->
      <div class="system-info">
        <system-information></system-information>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import SystemInformation from './components/system-info-mation.vue'
import { 
  Setting, 
  User, 
  Check, 
  Warning, 
  Search 
} from '@element-plus/icons-vue'

const testInput = ref('')

console.log('Cyan-Note 管理系统启动')
console.log('Element Plus 集成完成')
</script>

<style scoped lang="scss">
.landing-container {
  min-height: 100vh;
  padding: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.test-section {
  width: 100%;
  max-width: 1200px;
  text-align: center;
}

h1.gradient-text {
  font-size: 48px;
  font-weight: 800;
  margin-bottom: 16px;
  text-shadow: 0 4px 8px rgba(102, 126, 234, 0.3);
}

.subtitle {
  font-size: 18px;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 40px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.component-test {
  margin-bottom: 40px;
}

.test-card {
  max-width: 800px;
  margin: 0 auto;
  
  :deep(.el-card__header) {
    background: rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  }
  
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    span {
      font-size: 18px;
      font-weight: 700;
      color: rgba(255, 255, 255, 0.95);
    }
  }
}

.test-content {
  padding: 20px 0;
  
  .el-row {
    margin-bottom: 30px;
  }
  
  .status-tags {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 20px;
    
    .el-tag {
      border-radius: 16px;
      font-weight: 600;
      border: none;
      
      &.status-progress {
        background: #4ECDC4;
      }
      
      &.status-warning {
        background: #F39C12;
      }
      
      &.status-success {
        background: #27AE60;
      }
      
      &.status-danger {
        background: #E74C3C;
      }
      
      &.status-offline {
        background: #95A5A6;
      }
    }
  }
}

.system-info {
  margin-top: 40px;
  
  :deep(.system-information) {
    background: var(--glass-background);
    backdrop-filter: var(--backdrop-blur);
    border: 1px solid var(--glass-border);
    border-radius: 24px;
    padding: 24px;
    box-shadow: 
      0 12px 40px rgba(0, 0, 0, 0.2),
      0 0 60px rgba(255, 255, 255, 0.1);
  }
}

// 响应式设计
@media (max-width: 1200px) {
  .landing-container {
    padding: 20px;
  }
  
  h1.gradient-text {
    font-size: 36px;
  }
  
  .test-card {
    max-width: 100%;
  }
  
  .status-tags {
    .el-tag {
      margin-bottom: 8px;
    }
  }
}
</style>
